@import "../../style/public";
.goods-index {
  text-align: center;
  .btn {
    display: inline-block;
    background: #ffffff;
    border: 1px solid $color-red;
    @include remCalc(width, 220);
    @include remCalc(line-height, 60);
    text-align: center;
    @include remCalc(font-size, 32);
    @include remCalc(border-radius, 8);
    @include remCalc(margin-top, 44);
    color: $color-red;
  } 
}
.goods-list {
  .store-box {
    @include remCalc(line-height, 88);
    @include remCalc(padding, 0, 30);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include remCalc(font-size, 30);
    color: #333333;
    @include thin-border(false, false, bottom);
    i {
      @include remCalc(font-size, 30);
      color: #ccc;
    }
  }
  .tab-bar {
    display: flex;
    @include remCalc(line-height, 88);
    @include remCalc(padding, 0, 30);
    @include remCalc(margin, 20, 0);
    @include remCalc(font-size, 32);
    color: #333333;
    background: #fff;
    @include thin-border(true, false);
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    justify-content: space-around;
    box-sizing: border-box;

    > li {
      &:first-child {
        padding-left: 0;
      }
      &.active {
        color: $color-red;
        span {
          &::after {
            background: $color-red;
          }
        }
      }
      span {
        height: 100%;
        display: inline-block;
        position: relative;
        &::after {
          content: "";
          width: 100%;
          @include remCalc(height, 4);
          background: #fff;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 2;
        }
      }
    }
  }
  .list-box {
    li {
      background: #fff;
      @include remCalc(margin-bottom, 20);
      @include remCalc(padding-left, 30);
      @include thin-border(true, false);
      .top {
        @include remCalc(padding, 30, 30, 20, 0);
        display: flex;
        @include thin-border(false, false, bottom);
        .left {
          @include remCalc(width, 150);
          @include remCalc(height, 150);
          @include remCalc(border-radius, 4);
          @include remCalc(margin-right, 20);
          object-fit: cover;
        }
        .right {
          @include remCalc(font-size, 32);
          .goods-name {
            color: #333333;
            @include remCalc(width, 518);
            @extend %text-overflow;
          }
          .price {
            color: #f5364e;
            @include remCalc(padding, 20, 0, 10, 0);
          }
          .count-box {
            @include remCalc(font-size, 24);
            color: #999;
            position: relative;
            .stock {
              position: absolute;
              @include remCalc(left, 0);
            }
            .salecount {
              position: absolute;
              @include remCalc(left, 246);
            }
          }
        }
      }
      .bottom {
        @include remCalc(padding, 20, 30);
        display: flex;
        justify-content: flex-end;
        .btn {
          @include remCalc(margin-left, 20);
          border: 1px solid $color-red;
          @include remCalc(width, 120);
          @include remCalc(line-height, 58);
          text-align: center;
          @include remCalc(border-radius, 30);
          color: $color-red;
          @include remCalc(font-size, 28);
        }
      }
    }
  }
  .btn-add {
    @include remCalc(line-height, 88);
    text-align: center;
    @include remCalc(font-size, 36);
    color: #fff;
    background: $color-red;
  }
}
.spread-box {
  background: $color-red;
  height: 100%;
  @include remCalc(padding, 50);
  .top {
    @include remCalc(border-radius, 8);
    @include remCalc(padding, 40);
    background: #fff;
    .qr-code {
      @include remCalc(height, 550);
      background: #ccc;
    }
    .info {
      display: flex;
      @include remCalc(padding, 20, 0, 30, 0);
      @include remCalc(fonts-size, 32);

      .name {
        color: #333;
        @include remCalc(width, 364);
      }
      .price {
        color: #f5364e;
        flex: 1;
        text-align: right;
      }
    }
    .textarea {
      background: #f6f6f6;
      border: 1px solid #eeeeee;
      @include remCalc(border-radius, 8);
      @include remCalc(height, 170);
      @include remCalc(padding, 16, 26);
      box-sizing: border-box;
      @include remCalc(fonts-size, 28);
      width: 100%;
    }
  }
  .btn {
    @include remCalc(margin, 50, 0, 0, 0);
    @include remCalc(line-height, 88);
    text-align: center;
    @include remCalc(font-size, 36);
    color: $color-red;
    background: #fff;
    @include remCalc(border-radius, 4);
  }
}
.goods-edit {
  .swipe-box {
    position: relative;
    width: 100%;
    height: 100%;
    .zhk-sbylx {
      @include remCalc(font-size, 32);
      color: #ee3a31;
      position: absolute;
      @include remCalc(top, 20);
      @include remCalc(right, 20);
      background: #fff;
      border-radius: 50%;
      z-index: 10;
      &::after {
        content: "";
        position: absolute;
        $size: -20;
        @include remCalc(top, $size);
        @include remCalc(bottom, $size);
        @include remCalc(left, $size);
        @include remCalc(right, $size);
      }
    }
    .up-btn {
      @include remCalc(width, 80);
      @include remCalc(height, 80);
      display: flex;
      align-items: center;
      justify-content: center;
      background: $color-red;
      border-radius: 50%;
      position: absolute;
      @include remCalc(left, 30);
      @include remCalc(bottom, 20);
      z-index: 10;
      &::after{
        content: "";
        $size:-30;
        position: absolute;
        @include remCalc(left, $size);
        @include remCalc(right, $size);
        @include remCalc(top, $size);
        @include remCalc(bottom, -20);
      }
      i {
        color: #fff;
        @include remCalc(font-size, 44);
      }
    }
  }
  .head-img-box {
    height: 100%;
    position: relative;
    @include remCalc(margin, 20, 0, 0, 0);
    img {
      @include remCalc(width, 320);
      @include remCalc(height, 320);
      object-fit: cover;
    }
    .zhk-sbylx {
      @include remCalc(font-size, 32);
      color: #ee3a31;
      position: absolute;
      @include remCalc(top, -16);
      @include remCalc(right, -16);
      background: #fff;
      border-radius: 50%;
      // z-index: 1;
      &::after {
        content: "";
        position: absolute;
        $size: -20;
        @include remCalc(top, $size);
        @include remCalc(bottom, $size);
        @include remCalc(left, $size);
        @include remCalc(right, $size);
      }
    }
  }
  .btn-box {
    display: flex;
    > div {
      flex: 1;
      @include remCalc(line-height, 88);
      text-align: center;
      @include remCalc(font-size, 36);
      background: #fff;
      color: $color-red;
      box-shadow: inset 0 1px 0 0 #dddddd;
      &.primary {
        background: $color-red;
        color: #fff;
        box-shadow: inset 0 1px 0 0 $color-red;
      }
    }
  }
  .upload-placeholder {
    background: #f9f9f9;
    border: 1px dotted #dddddd;
    @include remCalc(margin, 20, 0, 0, 0);
    @include remCalc(width, 320);
    @include remCalc(height, 206);
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      @include remCalc(font-size, 48);
      color: #999;
    }
  }
  .form-style {
    .disabled {
      color: #ddd !important;
    }
    li {
      &.column {
        flex-direction: column;
        > div {
          justify-content: flex-start;
        }
      }
    }
    .remark-box {
      width: 100%;
      @include remCalc(margin, 20, 0, 0, 0);
      position: relative;
      .remark {
        width: 100%;
        box-sizing: border-box;
        @include remCalc(padding, 10, 24);
        @include remCalc(height, 220);
        background: #f8f8f8;
        border: 1px solid #e8e8e8;
      }
      .input-num {
        position: absolute;
        @include remCalc(font-size, 24);
        @include remCalc(bottom, 20);
        @include remCalc(right, 20);
        color: #bbb;
      }
    }

    .upload-img {
      @include remCalc(height, 340);
      background: #e4e4e4;
      box-shadow: 0 -1px 0 0 #dddddd, 0 1px 0 0 #dddddd;
      display: flex;
      align-items: center;
      justify-content: center;
      .up-btn-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .up-btn {
          @include remCalc(width, 140);
          @include remCalc(height, 140);
          display: flex;
          align-items: center;
          justify-content: center;
          background: $color-red;
          border-radius: 50%;
          i {
            color: #fff;
            @include remCalc(font-size, 76);
          }
        }
        span {
          @include remCalc(padding-top, 20);
          @include remCalc(font-size, 32);
          color: #999;
        }
      }
    }
    .goods-name {
      padding: 0;
      text-align: right;
      @include remCalc(height, 140);
      @include remCalc(width, 420);
    }
    .exp-day {
      input {
        @include remCalc(width, 140);
        @include remCalc(padding, 0, 10);
        text-align: center;
      }
    }
    .exp-date {
      input {
        @include remCalc(padding, 0, 10);
        @include remCalc(width, 160);
        text-align: center;
      }
    }
    .num-box {
      @include remCalc(margin, -4, 0);
      display: flex;
      align-items: center;
      > i {
        @include remCalc(font-size, 46);
        &.activeClass {
          color: #459dff;
        }
        &.disabledClass {
          color: #ddd;
        }
      }
      .buy-num {
        color: #333;
        text-align: center;
        @include remCalc(width, 108);
        @include remCalc(padding, 0, 10);
        @include remCalc(font-size, 32);
      }
    }
  }
}
.goods-details {
  textarea {
    width: 100%;
  }
  .img-box {
    position: relative;
    .zhk-sbylx {
      @include remCalc(font-size, 32);
      color: #ee3a31;
      position: absolute;
      @include remCalc(top, 10);
      @include remCalc(right, 10);
      background: #fff;
      border-radius: 50%;
      z-index: 10;
      &::after {
        content: "";
        position: absolute;
        $size: -20;
        @include remCalc(top, $size);
        @include remCalc(bottom, $size);
        @include remCalc(left, $size);
        @include remCalc(right, $size);
      }
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}
.goods-spread{
  .post-img{
    width: 100%;
    height: auto;
  }
}